<template>
	<div class="wrap floor-main-wrap gg-prtrol-pos">
		<div class="gg-structure">
			<div class="gg-warnNum-dialog gg-prober-pos gg-warnNum-long-dialog">
				<div class="gg-prober-header clearfix">
					<div class="gg-prober-header--info">
						<span class="gg-prober-h5">{{moniterDevice.deviceTypeName}}</span>
						<a class="gg-online-item"><span v-html="onlineHtml"></span></a>
						<a class="gg-prober-location" id="deviceTitle1" :title="moniterDevice.deviceTitle1">{{moniterDevice.deviceTitle1}}</a>
					</div>
				</div>
				<div class="gg-prober-group"><a :class="currentStateColor"><span>{{currentStateText}}</span></a></div>
				<div class="gg-prober-body">
					<div class="gg-prober-content">
						<div class="gg-switch-content">
							<div class="gg-btn-capsuleGroup gg-btn-capsuleInline gg-prober-capsule">
								<a class="gg-btn-capsule" :class="isActive === 0 ? 'is-active' : ''" @click="capsuleFn(0,'')" v-if="m_mpa_alert.length > 0">实时读数</a>
								<a class="gg-btn-capsule" :class="isActive === 1 ? 'is-active' : ''" @click="capsuleFn(1,'')" v-if="m_mpa_alert.length > 0">监测曲线</a>
								<a class="gg-btn-capsule" :class="isActive === 3 ? 'is-active' : ''" @click="capsuleFn(3,'')">设施信息</a>
								<a class="gg-btn-capsule" :class="isActive === 2 ? 'is-active' : ''" @click="capsuleFn(2,'')" v-if="isShowEchart == 'deviceWater'">水压曲线</a>
								<a class="gg-btn-capsule" :class="isActive === 4 ? 'is-active' : ''" @click="capsuleFn(4,'accidRecord')">异常记录</a>
							</div>
							<div class="gg-prober-model">
								<div class="gg-prober-unit" :class="isActive==0 ? 'showProber' : ''">
									<div class="gg-prober-unit__table">
										<table>
											<thead>
												<tr>
													<th width="50%">对象</th>
													<th width="50%">实时值</th>
												</tr>
											</thead>
										</table>
									</div>
									<div class="gg-scroll-tbody scroll-normal">
										<table>
											<tbody>
												<tr v-for="(item,index) in m_mpa_alert" :key="index">
													<td style="width: 50%">{{item.flagName}}</td>
													<td style="width: 50%">{{item.measurement}} {{item.unit}}</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
								<div class="gg-prober-unit" :class="isActive==1 ? 'showProber' : ''">
                                    <div class="gg-capuse-time" style="right: 5px;">
                                        <a class="gg-capuse-time--item" :class="timerAct === 24 ? 'is-active' : ''" @click="changeTimeFn(24,0)">24小时</a>
                                        <a class="gg-capuse-time--item" :class="timerAct === 7 ? 'is-active' : ''" @click="changeTimeFn(7,0)">近一周</a>
                                    </div>
                                    <div class="gg-probe-chart">
                                        <div class="gg-probe-chart__btn">
                                            <a class="gg-ele-btn" :class="echartsType === 'ele' ? 'echart-act': ''" @click="changeEchart('ele')">剩余电流</a>
                                            <a class="gg-tem-btn" :class="echartsType === 'tem' ? 'echart-act': ''" @click="changeEchart('tem')">线缆温度</a>
                                            <a class="gg-liu-btn" :class="echartsType === 'liu' ? 'echart-act': ''" @click="changeEchart('liu')">相电流</a>
                                            <a class="gg-ya-btn" :class="echartsType === 'ya' ? 'echart-act': ''" @click="changeEchart('ya')">相电压</a>
                                        </div>
                                        <!--剩余电流 折线图-->
                                        <div class="gg-chart-ele" id="deviceMa" :class="echartsType === 'ele' ? 'showProber': 'hideProber'"></div>
                                        <div class="gg-chart-tem" id="deviceTem" :class="echartsType === 'tem' ? 'showProber': 'hideProber'"></div>
                                        <div class="gg-chart-liu" id="deviceLiu" :class="echartsType === 'liu' ? 'showProber': 'hideProber'"></div>
                                        <div class="gg-chart-ya" id="deviceYa" :class="echartsType === 'ya' ? 'showProber': 'hideProber'"></div>
                                    </div>
                                </div>
                                <div class="gg-prober-unit" :class="isActive==2 ? 'showProber' : ''">
                                    <div class="gg-probe-chart" id="deviceWater"></div>
                                </div>
								<div class="gg-prober-unit" :class="isActive==3 ? 'showProber' : ''">
									<!--设施信息 列表-->
									<div class="gg-prober-device-list">
										<div class="gg-prober-device">
											<span class="gg-probe-cell">主机回路点位: </span>
											<span class="gg-probe-cell"><a class="gg-probe-unit-item" v-html="loopHtml">--</a></span>
										</div>
										<div class="gg-prober-device">
											<span class="gg-probe-cell">设备ID：</span>
											<span class="gg-probe-cell" id="deviceId">{{moniterDevice.deviceId}}</span>
										</div>
										<div class="gg-prober-device">
											<span class="gg-probe-cell">设施品牌：</span>
											<span class="gg-probe-cell"><a class="gg-probe-unit-item">{{moniterDevice.deviceBrand}}</a></span>
										</div>
										<div class="gg-prober-device">
											<span class="gg-probe-cell">ID/SN/序列号：</span>
											<span class="gg-probe-cell">{{moniterDevice.controlHost == null ? "--" : moniterDevice.controlHost}}</span>
										</div>
									</div>
								</div>
								<div class="gg-prober-unit" :class="isActive==4 ? 'showProber' : ''">
									<!--异常记录 列表-->
									<ul class="gg-probe-list scroll-normal" v-html="abnormalHtml"></ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
            <div class="toggle-warnNum-dialog" @click="monitoringDeviceFn">监测装置<span class="ggicon-back" :style="isRotate ? 'transform: rotate(-90deg)': 'transform: rotate(90deg)'"></span></div>
		</div>
		<div class="gg-warnNum-long-dialog add-prober-pos add-warnNum-dialog" :style="isRotate ? 'display: block' : 'display: none'">
			<ul id="add_deviceUnit" class="add_deviceUnit">
				<li class="add-unit-active" v-for="(item,index) in addUnitData" :key="index">监测装置{{index + 1}}</li>
			</ul>
			<div class="add-prober-header">
				<div class="gg-prober-header--info"><span class="gg-prober-h5">{{deviceData.deviceTypeName}}</span>
					<a class="gg-online-item"><span id="add_onlineState">在线</span></a>
					<a class="gg-prober-location"><span id="add_deviceTitle1" :title="deviceData.homeAddress" class="add-device-info">{{deviceData.homeAddress}}</span></a>
				</div>
			</div>
			<div class="add-prober-body">
				<div class="gg-prober-content">
					<div class="gg-switch-content">
						<div class="gg-prober-group"><a class="gg-prober-group-alert gg-abnormal-item"><span id="currentM_alert">6.6</span>m</a></div>
						<div class="gg-btn-capsuleGroup gg-btn-capsuleInline gg-prober-capsule">
							<a class="add-btn-capsule" :class="addActiveIdx === 0 ? 'add-is-active': ''" name="m" @click="addCapsuleFn(0,'')">水位曲线</a>
							<a class="add-btn-capsule" :class="addActiveIdx === 1 ? 'add-is-active': ''" @click="addCapsuleFn(1,'')">设施信息</a>
							<a class="add-btn-capsule" :class="addActiveIdx === 2 ? 'add-is-active': ''" name="accidRecord" @click="addCapsuleFn(2,'')">异常记录</a>
						</div>
					</div>
					<div class="gg-prober-model">
						<div class="add-prober-unit" :class="addActiveIdx === 0 ? 'showProber':''">
							<div class="add-capuse-time">
								<a class="gg-capuse-time--item" :class="timerAct === 24 ? 'is-active' : ''" @click="changeTimeFn(24,1)">24小时</a>
								<a class="gg-capuse-time--item" :class="timerAct === 7 ? 'is-active' : ''" @click="changeTimeFn(7,1)">近一周</a>
							</div>
							<!--水位 折线图-->
							<div class="gg-probe-chart" id="deviceMa" :class="echartsIdx === '' ? 'showProber': 'hideProber'"></div>
							<div class="gg-probe-chart" id="deviceTem" :class="echartsIdx === '' ? 'showProber': 'hideProber'"></div>
							<div class="gg-probe-chart" id="deviceWater" :class="echartsIdx === 'mpaEchart' ? 'showProber': 'hideProber'"></div>
							<div class="gg-probe-chart" id="deviceWaterLevel" :class="echartsIdx === '' ? 'showProber': 'hideProber'"></div>
							<div class="gg-probe-chart" id="deviceLiu" :class="echartsIdx === '' ? 'showProber': 'hideProber'"></div>
							<div class="gg-probe-chart" id="deviceYa" :class="echartsIdx === '' ? 'showProber': 'hideProber'"></div>
						</div>
						<div class="add-prober-unit" :class="addActiveIdx === 1 ? 'showProber':''">
							<div class="gg-prober-device-list">
								<div class="gg-prober-device">
									<span class="gg-probe-cell">设备ID：</span>
									<span class="gg-probe-cell add-device-info" id="add_deviceId">GDFS_LGBHDZX20200103_C_w16</span>
								</div>
								<div class="gg-prober-device"><span class="gg-probe-cell">设施品牌：</span>
									<span class="gg-probe-cell add-device-info" id="add_deviceBrand">深圳泰科TK83G80K5T5</span>
								</div>
								<div class="gg-prober-device"><span class="gg-probe-cell">ID/SN/序列号：</span>
									<span class="gg-probe-cell add-device-info" id="add_controlHost">868681049637315</span>
								</div>
							</div>
						</div>
						<div class="add-prober-unit" :class="addActiveIdx === 2 ? 'showProber':''">
							<!--异常记录 列表-->
							<ul class="gg-probe-list scroll-normal" id="add_deviceAccident">
								<li class="abli"><span class="abli-text">设备正常</span><span class="abli-date">2020-04-11 18:19:57</span></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	/* eslint-disable */ // eslist 不检测
	import $Service from "../services/main";
	import $ from "jquery";
	import special_device_type from "../assets/data/special_device_type.json";
	//监测装置
	let waterPumpCode = special_device_type.waterPump;
	let smokeMonitor = special_device_type.smokeMonitorCode; //烟感
	let fireDoor = special_device_type.fireDoor; //防火门
	//水箱 水池 水泵
	let waterTank = special_device_type.fireWaterTank;
	let waterPool = special_device_type.fireWaterPool;
	let waterPump = special_device_type.fireWaterPump;
	let waterEnd = special_device_type.fireHydrant_end; //末端
	//消火栓
	let hydrantIndoor = special_device_type.fireHydrant_indoor;
	let hydrantOutUp = special_device_type.fireHydrant_outUp;
	let hydrantOutDown = special_device_type.fireHydrant_outDown;

	export default {
		name: 'FireHydrant',
		data() {
			return {
				unitId: "440604YZDW201912310001",
				buildId: "440604YZDW201912310001_001",
				deviceId: 'GDFS_LGBHDZX20200103_C_w4',

				moniterDevice: {}, // 设施数据
				exceptionRecord: null, // 异常记录
				monitorNotesByTime: null, // 监测装置 曲线图
				monitoringObject: null, // 设施数据
				measurement: null, // 
				isActive: 0,
				deviceTypeId: '',
				abnormalHtml: '',
				loopHtml: '',
				onlineHtml: '',
				currentStateText: '正常',
				currentStateColor: 'gg-normal-item',
				isRotate: false,
				addUnitData: [],
				addActiveIdx: 0,
				echartsIdx: '',
				deviceData: {},
                timerAct: 7,
                m_mpa_alert: [],
                echartsType: 'ele',
                isShowEchart: ''
			}
		},
		mounted() {
			this.deviceInfoFn(this.deviceId);
		},
		methods: {
			// 查询设备的基本信息
			deviceInfoFn(deviceId) {
				let that = this;
				$Service.getMoniterDevice(this, {
					unitId: this.unitId,
					deviceId: deviceId
				}).then(res => {
					if (res.code === "success") {
						let data = res.data;
						that.moniterDevice = data;
						that.moniterDevice.deviceBrand = that.moniterDevice.brand + that.moniterDevice.model || '--';
						that.moniterDevice.vender = data.vender == null || data.vender == "null" ? "" : data.vender; //厂商
						that.moniterDevice.deviceId = data.deviceId == null ? "" : data.deviceId;
						that.monitoringObject = data.monitoringObject;
						var onlineState = "" + data.onlineState == "1" ? "在线" : "" + data.onlineState == "0" ? "离线" : "未接入"; //设备是否在线 1 在线 0  离线

						var buildName = data.buildName == null ? "" : data.buildName; //楼栋名称
						var floorName = data.floorName == null ? "" : data.floorName; //楼层名称
						var deviceAddress = data.deviceAddress == null ? "" : data.deviceAddress; //具体地址
						var laLoop = data.laLoop == null ? "" : data.laLoop; //回路
                        var laPoint = data.laPoint == null ? "" : data.laPoint; //点位

						that.deviceTypeId = data.deviceTypeId; //设备类型id

						var title1 = "";
						if (data.isCTerminal === 1) {
							title1 = (data.homeAddress || "") + deviceAddress;
						} else {
							title1 = buildName + floorName + deviceAddress;
						}
						that.moniterDevice.deviceTitle1 = title1;
						var loopData = '';
						switch (that.deviceTypeId) {
							case "19010000":
							case "19020000":
							case "19030000":
							case "19050000":
							case "19080000":
							case "19120000":
							case "19150000":
							case "19210000":
							case "19220000":
							case "19230000":
								if (onlineState == "离线" || onlineState == "未接入") {
									$("#onlineState").parent().removeClass("gg-online-item").addClass("gg-outline-item");
									$(".gg-prober-body .gg-prober-group").hide();
								}
								that.onlineHtml = onlineState; //设备在线状态
								break;
							case "03010100":
							case "03010200":
							case "03010300":
							case "03010400":
							case "03010500":
							case "03010600":
							case "03020000":
								that.loopHtml = (data.laMake == null ? "" : data.laMake) + "-" + (laLoop == null ? "" : laLoop) + "-" + (
									laPoint == null ? "" : laPoint) + "-" + data.channelNum;
								break;
							default:
								that.loopHtml = (data.laMake == null ? "" : data.laMake) + "-" + (laLoop == null ? "" : laLoop) + "-" + (
									laPoint == null ? "" : laPoint);
								break;
						}

						if (data["onlineState"] === 1) {
							if (data["runState"] === "0") {
								that.currentStateText = '正常';
								that.currentStateColor = 'gg-normal-item';
							} else if (data["runState"] == "1") {
								that.currentStateText = '报警';
								that.currentStateColor = 'gg-alarm-item';
							} else if (data["runState"] == "2") {
								that.currentStateText = '故障';
								that.currentStateColor = 'gg-prober-item';
							} else if (data["runState"] == "96" && that.deviceTypeId == fireDoor) {
								that.currentStateText = '开启';
								that.currentStateColor = 'gg-prober-item';
							} else if (data["runState"] == "97" && that.deviceTypeId == fireDoor) {
								that.currentStateText = '关闭';
								that.currentStateColor = 'gg-prober-item';
							} else if (data["runState"] == "98") {
								that.currentStateText = '预警';
								that.currentStateColor = 'gg-warning-item';
							} else if (data["runState"] == "5") {
								that.currentStateText = '异常';
								that.currentStateColor = 'gg-abnormal-item';
							}
						} else {
							that.currentStateColor = 'gg-normal-item';
							// that.currentStateText = '';
                        }
                        
                        // 实时读数
                        if (
                            that.deviceTypeId == "19050000" ||
                            that.deviceTypeId == "01010000" ||
                            that.deviceTypeId == "01020000" ||
                            that.deviceTypeId == "01030000"
                        ) {
                            that.deviceCur(data.deviceId);
                        }else{
                            that.isActive = 3;
                        }

                        
                        //加载水压水位电流数据 echarts
                        switch (that.deviceTypeId) {
                            case hydrantIndoor:
                            case hydrantOutUp:
                            case hydrantOutDown:
                            case "01010000": // 配电箱
                            case "01020000": //供电末端配电箱
                            case "01030000": //末端配电箱切换装置
                            case waterTank:
                            case waterEnd:
                            case waterPool:
                            case waterPump:
                            case "19150000": //水位

                            case "19020000": //室内水压监测
                            case "19030000": //室外水压监测
                            case "05100000": //水压传感器（非独立式）
                            case "05100100": //室内消火栓系统水压传感器（非独立式）
                            case "05100200": //室外消火栓系统水压传感器（非独立式）
                            case "05100300": //自动喷水灭火系统水压传感器（非独立式）
                            case "19080000": //喷淋末端

                            case waterPumpCode: //泵
                            case "19050000": //电气火灾
                            case "19180000": //消防泵启停监测装置  消防泵
                            case "05110000": //水位传感器（非独立式）
                                that.devicemAFn(data.deviceId, that.deviceTypeId, "7", data["runState"], "" + data["onlineState"]);
                                break;
                        }

                        
                        switch (that.deviceTypeId) {
                            case "19020000": //室内消火栓水压监测装置  室外
                            case "19030000": //室外消火栓水压监测装置  室内
                            case "05100000": //水压传感器（非独立式）
                            case "05100100": //室内消火栓系统水压传感器（非独立式）
                            case "05100200": //室外消火栓系统水压传感器（非独立式）
                            case "05100300": //自动喷水灭火系统水压传感器（非独立式）
                            case "19080000": //喷淋末端自动试水装置   末端
                                that.isShowEchart = 'deviceWater';
                                break;
                        }
					}
				});
			},

			// 点击切换
			capsuleFn(idx, type) {
				this.isActive = idx;
				if (type === "accidRecord" && this.deviceTypeId != fireDoor) {
					this.deviceAccidentInfo();
				}

				//sheshi
				if (this.deviceTypeId == "19050000") {
					if (this.isActive == 1) {
						$(".gg-capuse-time").show();
					} else {
						$(".gg-capuse-time").hide();
					}
				} else if (
					this.deviceTypeId == "19020000" ||
					this.deviceTypeId == "19030000" ||
					this.deviceTypeId == "19080000" ||
					this.deviceTypeId == "19150000" ||
					this.deviceTypeId == waterPumpCode ||
					this.deviceTypeId == smokeMonitor
				) {
					if (this.isActive == 0) {
						$(".gg-capuse-time").show();
					} else {
						$(".gg-capuse-time").hide();
					}
				}
			},

			addCapsuleFn(idx, type) {
				this.addActiveIdx = idx;
            },
            
            // 点击切换电流，温度，相电流，相电压
            changeEchart(type){
                this.echartsType = type;
            },

			// 设备的故障列表
			deviceAccidentInfo() {
				let that = this;
				$Service.getExceptionRecord(this, {
					unitId: this.unitId,
					deviceId: this.deviceId
				}).then(res => {
					let $html = '暂无数据';
					if (res.code === "success" && res.data.length > 0) {
						let abnormalData = res.data;
						for (var i = 0; i < abnormalData.length; i++) {
							// 根据deviceTypeId判断是否显示异常值，后端暂未构建
							switch (abnormalData[i].deviceTypeId) {
								case "03010100":
								case "03010200":
								case "03010300":
								case "03010400":
								case "03010500":
								case "03010600":
									$html += '<li class="abli"><span class="abli-text">' +
										(abnormalData[i].faultDescribe || "--") +
										(abnormalData[i].warningValue == null ? "" : ",") + "<span>" +
										(abnormalData[i].warningValue == null ? "" : abnormalData[i].warningValue) +
										'</span></span><span class="abli-date">' +
										(abnormalData[i].deviceTime ? abnormalData[i].deviceTime : "--") +
										"</span></li>";
									break;
								default:
									$html += '<li class="abli"><span class="abli-text">' +
										(abnormalData[i].faultDescribe || "--") +
										'</span><span class="abli-date">' +
										(abnormalData[i].deviceTime ? abnormalData[i].deviceTime : "--") +
										"</span></li>";
									break;
							}
						}
						$(".abli-text span").css("color", "red");
					}
					that.abnormalHtml = $html;
				});
			},

			// 点击监测装置按钮
			monitoringDeviceFn() {
				let that = this;
				this.isRotate = !this.isRotate;
				if (this.isRotate) {
					if (that.MonitoringObject === "") {
						$Service.getMonitoringObject(that, {
							unitId: that.unitId,
							deviceId: this.deviceId
						}).then(res => {
							if (res.code === "success") {
								that.monitoringDevice(res.data);
							}
						});
					} else {
						$Service.getMonitoringObject(that, {
							unitId: that.unitId,
							deviceId: this.deviceId
						}).then(res => {
							if (res.code === "success") {
								that.monitoringDevice(res.data);
							}
						});
					}
				}
			},

			// 切换7天或24 小时
			changeTimeFn(idx,type) {
                this.timerAct = idx;
				//加载电流 线缆温度echarts
                if(type === 0){
				    this.devicemAFn(this.deviceId, this.deviceTypeId, idx, '', "");
                }else{
				    this.devicemAFn(this.deviceData.deviceId, this.deviceData.deviceTypeId, idx, this.deviceData.runState, "" + this.deviceData.onlineState);
                }
			},

			// 监测装置渲染
			monitoringDevice(data) {
				let that = this;
				this.addUnitData = data;
				//默认第一个设施信息
				if (data[0]) {
					var data_click = data[0];
					this.deviceData = data[0];
				} else {
					var data_click = data;
					this.deviceData = data;
				}
				if (this.deviceData.measurement !== "") {
					var m_mpa_alert = JSON.parse(this.deviceData.measurement);
				}

				if ("" + this.deviceData.onlineState === "1") {
					switch (this.deviceData.runState) {
						case "0":
							$("#currentState_alert").html("正常");
							$(".gg-prober-group-alert").addClass("gg-normal-item");
							break;
						case "1":
							$("#currentState_alert").html("报警");
							$(".gg-prober-group-alert").addClass("gg-alarm-item");
							break;
						case "2":
							$("#currentState_alert").html("故障");
							$(".gg-prober-group-alert").addClass("gg-prober-item");
							break;
						case "5":
							$("#currentState_alert").html("异常");
							$(".gg-prober-group-alert").addClass("gg-abnormal-item");
							break;
						case "96":
							$("#currentState_alert").html("开启");
							$(".gg-prober-group-alert").addClass("gg-prober-item");
							break;
						case "97":
							$("#currentState_alert").html("关闭");
							$(".gg-prober-group-alert").addClass("gg-prober-item");
							break;
						case "98":
							$("#currentState_alert").html("预警");
							$(".gg-prober-group-alert").addClass("gg-warning-item");
							break;
					}
					if (m_mpa_alert && m_mpa_alert[1]) {
						$("#currentM_alert").html(m_mpa_alert[1].measurement);
						$("#currentMpa_alert").html(m_mpa_alert[1].measurement);
					}
				} else {
					$(".gg-prober-group-alert").removeClass();
					$("#currentState_alert").html("");
				}
				// $("#add_deviceTitle").html(data_click.deviceTypeName);

				let deviceTypeId = data_click.deviceTypeId;
				switch (deviceTypeId) {
					case "19010000":
					case "19020000":
					case "19030000":
					case "19050000":
					case "19080000":
					case "19120000":
					case "19150000":
					case "19210000":
					case "19220000":
					case "19230000":
						$("#add_onlineState").html(
							"" + data_click.onlineState === "0" ? "离线" : "" + data_click.onlineState === "1" ? "在线" : "未接入"
						);
						if ("" + data_click.onlineState !== "1") {
							$("#add_onlineState").parent().removeClass("gg-online-item").addClass("gg-outline-item");
							$(".add-prober-body .gg-prober-group").hide();
						}
						break;
				}

				if (data_click.isCTerminal === 1) {
					this.deviceData.homeAddress = (this.deviceData.homeAddress || "") + (this.deviceData.deviceAddress || "");
					$("#add_deviceTitle1").attr(
						"title",
						(data_click.homeAddress || "") +
						(data_click.deviceAddress || "")
					);
				} else {
					this.deviceData.homeAddress = (this.deviceData.buildName || "") + (this.deviceData.floorName || "") + (this.deviceData.deviceAddress || "");
					$("#add_deviceTitle1").attr(
						"title",
						(data_click.buildName || "") +
						(data_click.floorName || "") +
						(data_click.deviceAddress || "")
					);
				}
				$("#add_deviceId").html(data_click.deviceId);
				$("#add_deviceBrand").html(data_click.brand + data_click.model);
				$("#add_controlHost").html(data_click.controlHost || "--");
				$("#add_deviceAccident").html(data_click.measurement);
				//默认第一个异常记录
				this.add_abnormal(data_click.deviceId);
                
				//实时读数
				this.deviceCur(data_click.deviceId);

				//监测曲线 装置展开不再请求
				if (
					deviceTypeId != "01010000" &&
					deviceTypeId != "06010000" &&
					deviceTypeId != "06030000" &&
					deviceTypeId != "06040000" &&
					deviceTypeId != "07100000" &&
					deviceTypeId != "05010000" &&
					deviceTypeId != "05020000" &&
					deviceTypeId != "05030000"
				) {
					that.devicemAFn(data_click.deviceId, deviceTypeId, "7", "1", data_click.runState, "" + data_click.onlineState);
					//echart 副框天数切换
					// var add_capuse_time = $(".add-capuse-time .gg-capuse-time--item");
					// add_capuse_time.click(function() {
					//     add_capuse_time.removeClass("is-active");
					//     $(this).addClass("is-active");

					//     //echart load
					//     // ZS.echart.loading = GS.$Loading.service({
					//     //   target: ".gg-probe-chart"
					//     // });
					//     // ZS.echart.sign = true;

					//     //查询24小时内 还是 一周内的
					//     var value = $(this).attr("id");
					//     //加载电流 线缆温度echarts
					//     that.devicemAFn( data_click.deviceId, deviceTypeId, value, data["runState"], "" + data.onlineState);
					// });
				}

				//切换监测装置
				$("#add_deviceUnit li").click(function() {
					$("#add_deviceUnit li").removeClass("add-unit-active");
					$(this).addClass("add-unit-active");

					//设施信息
					var data_click = data[$(this).index()];
					let currentText = '';
					let currentClass = '';
					if ("" + data_click.onlineState === "1") {
						switch (data_click.runState) {
							case "0":
								currentText = "正常";
								currentClass = "gg-normal-item";
								break;
							case "1":
								currentText = "报警";
								currentClass = "gg-alarm-item";
								break;
							case "2":
								currentText = "故障";
								currentClass = "gg-prober-item";
								break;
							case "5":
								currentText = "异常";
								currentClass = "gg-abnormal-item";
								break;
							case "96":
								currentText = "开启";
								currentClass = "gg-prober-item";
								break;
							case "97":
								currentText = "关闭";
								currentClass = "gg-prober-item";
								break;
							case "98":
								currentText = "预警";
								currentClass = "gg-warning-item";
								break;
						}
						$("#currentState_alert").html(currentText);
						$("#currentState_alert").parent().removeClass().addClass(currentClass);
					} else {
						$("#currentState_alert").html("");
						$("#currentState_alert").parent().removeClass();
					}

					$("#add_deviceTitle").html(data_click.deviceTypeName);

					let deviceTypeId = data_click.deviceTypeId;
					switch (deviceTypeId) {
						case "19010000":
						case "19020000":
						case "19030000":
						case "19050000":
						case "19080000":
						case "19120000":
						case "19150000":
						case "19210000":
						case "19220000":
						case "19230000":
							$("#add_onlineState").html(
								"" + data_click.onlineState === "0" ?
								"离线" :
								"" + data_click.onlineState === "1" ?
								"在线" :
								"未接入"
							);
							if ("" + data_click.onlineState !== "1") {
								$("#add_onlineState")
									.parent()
									.removeClass("gg-online-item")
									.addClass("gg-outline-item");
								$(".add-prober-body .gg-prober-group").hide();
							}
							break;
					}

					if (data_click.isCTerminal === 1) {
						$("#add_deviceTitle1").html(
							(data_click.homeAddress || "") +
							(data_click.deviceAddress || "")
						);
						$("#add_deviceTitle1").attr(
							"title",
							(data_click.homeAddress || "") +
							(data_click.deviceAddress || "")
						);
					} else {
						$("#add_deviceTitle1").html(
							(data_click.buildName || "") +
							(data_click.floorName || "") +
							(data_click.deviceAddress || "")
						);
						$("#add_deviceTitle1").attr(
							"title",
							(data_click.buildName || "") +
							(data_click.floorName || "") +
							(data_click.deviceAddress || "")
						);
					}
					$("#add_deviceId").html(data_click.deviceId);
					$("#add_deviceBrand").html(data_click.brand + data_click.model);
					$("#add_controlHost").html(data_click.controlHost || "--");

					//异常记录
					that.add_abnormal(data_click.deviceId);

					//实时读数
					that.deviceCur(data_click.deviceId);

					//监测曲线
					that.devicemAFn(
						data_click.deviceId,
						deviceTypeId,
						"7",
						"1",
						data_click.runState,
						"" + data_click.onlineState
					);
				});
			},

			//物联网 监测装置 异常记录
			add_abnormal(deviceId) {
				let that = this;
				$Service.getExceptionRecord(that, {
						unitId: that.unitId,
						deviceId: deviceId
					})
					.then(res => {
						if (res.code == "success" && res.data.length > 0) {
							let html = "";
							let abnormalData = res.data;
							for (let i = 0; i < abnormalData.length; i++) {
								let abnormalTime = abnormalData[i].deviceTime ?
									abnormalData[i].deviceTime :
									"--";
								html +=
									'<li class="abli"><span class="abli-text">' +
									(abnormalData[i].faultDescribe || "--") +
									'</span><span class="abli-date">' +
									abnormalTime +
									"</span></li>";
							}
							$("#add_deviceAccident").html(html);
						} else {
							$("#add_deviceAccident").html("暂无数据");
						}
					});
			},

			//实时读数
			deviceCur(deviceId) {
                let that = this;
				$Service.getMeasurement(this, {
					unitId: this.unitId,
					deviceId: deviceId
				}).then(res => {
					if (res.code) {
						let data = res.data.measurement;
						if (res.code == "success" && data) {
							let html = "";
                            data = JSON.parse(data);
                            that.m_mpa_alert = data;

							data.forEach(function(value, index, array) {
								if (value != null) {
									let flagName = value.flagName || "--"; //名称
									let measurement = value.measurement || "-"; //实时值
									let unit = value.unit == null ? "-" : value.unit == "undefined" ? "-" : value.unit; //单位
									html += "<tr><td style='width: 50%'>" + flagName + "</td><td style='width: 50%'>" + measurement + unit +
										"</td></tr>";
								}
							});
							$("#curData").html(html);
						}
					}
				});
			},

			devicemAFn(deviceId, deviceTypeId, value, runState, onlineState) {
				let that = this;
				//先查询 当前设备 最新的报警 或者隐患 获取时间 用于查询 异常记录（监测中心数据量大，用时间限制查询范围）
				var data = null;
				$Service.getMonitorNotesByTime(this, {
					unitId: this.unitId,
					deviceId: deviceId,
					flag: value
				}).then(res => {
					let $html = '<span style="font-size: 1.2rem">暂无数据</span>';
					if (res.code !== "success" || Object.keys(res.data).length == 0) {
						switch (deviceTypeId) {
							case "19050000":
							case "01010000":
							case "01020000":
							case "01030000":
								//设备类型 电气火灾监控装置 显示电流曲线 电温曲线
								$("#deviceMa").html($html);
								$("#deviceTem").html($html);
								$("#deviceLiu").html($html);
								$("#deviceYa").html($html);
								break;
							case "19020000": //室内水压监测
							case "19030000": //室外水压监测
							case hydrantIndoor:
							case hydrantOutUp:
							case hydrantOutDown:
							case waterEnd:
							case "05100000":
							case "05100100":
							case "05100200":
							case "05100300":
							case "19080000": //喷淋末端
								//设备类型 室内水压监测装置  室外水压加测装置 喷淋末端 显示水压曲线
								$("#deviceWater").html($html);
								break;
							case "19150000": //水位
							case waterPumpCode: //泵
							case waterPool:
							case waterPump:
							case waterTank:
							case "05110000":
								//水位
								$("#deviceWaterLevel").html($html);
								break;
						}
						return;
					}
					data = res.data;

					var currentMpa = 0; //当前水压
					var currentM = 0; //当前水位
					var currentV = ""; //电池电压
					if (data != null) {
						if (data.yValue != null && data.yValue.length > 0) {
							currentMpa = data.yValue[data.yValue.length - 1];
						}
						if (data.batteryValue != null && data.batteryValue.length > 0) {
							currentV = data.batteryValue[data.batteryValue.length - 1];
						}
						if (data.waterLevelValue != null && data.waterLevelValue.length > 0) {
							currentM = data.waterLevelValue[data.waterLevelValue.length - 1];
						}
					}
					if (
						deviceTypeId == "19020000" ||
						deviceTypeId == "19030000" ||
						deviceTypeId == hydrantIndoor ||
						deviceTypeId == hydrantOutUp ||
						deviceTypeId == hydrantOutDown
					) {
						if (onlineState === "1") {
							switch (runState) {
								case "1":
									$("#currentMpa").parent().removeClass().addClass("gg-alarm-item");
									break;
								case "2":
									$("#currentMpa").parent().removeClass().addClass("gg-prober-item");
									break;
								case "5":
									$("#currentMpa").parent().removeClass().addClass("gg-abnormal-item");
									break;
								case "96":
									$("#currentMpa").parent().removeClass().addClass("gg-prober-item");
									break;
								case "97":
									$("#currentMpa").parent().removeClass().addClass("gg-prober-item");
									break;
								case "98":
									$("#currentMpa").parent().removeClass().addClass("gg-warning-item");
									break;
							}
						} else {
							$("#currentMpa").parent().removeClass();
						}
					} else if (
						deviceTypeId == "19150000" ||
						deviceTypeId == waterPumpCode ||
						deviceTypeId == "19080000" ||
						deviceTypeId == hydrantIndoor ||
						deviceTypeId == hydrantOutUp ||
						deviceTypeId == hydrantOutDown
					) {
						if (onlineState === "1") {
							let classText = "";
							switch (runState) {
								case "1":
									classText = "gg-alarm-item";
									break;
								case "2":
								case "96":
								case "97":
									classText = "gg-prober-item";
									break;
								case "5":
									classText = "gg-abnormal-item";
									break;
								case "98":
									classText = "gg-warning-item";
									break;
							}
							$("#currentM").parent().removeClass().addClass(classText);
						} else {
							$("#currentM").parent().removeClass();
						}
					}

					//当前的电流 温度  水压值回显
					$("#currentMpa").html(currentMpa == null ? 0 : currentMpa);
					$("#powersupplyVoltage").html(currentV == null ? "" : currentV);
					$("#currentM").html(currentM == null ? "" : currentM);
					// 线缆温度
					var zheXianContent = {
						containerId: "deviceTem",
						option: {
							title: {
								text: ""
							},
							tooltip: {
								trigger: "axis",
								formatter: function(params) {
									var relVal = params[0].name;
									for (var i = 0, l = params.length; i < l; i++) {
										relVal +=
											"<br/>" +
											params[i].seriesName +
											" : " +
											params[i].value +
											"℃";
									}
									return relVal;
								},
								axisPointer: {
									type: "cross",
									label: {
										backgroundColor: "#6a7985"
									}
								}
							},
							legend: {
								data: ["A相温度", "B相温度", "C相温度", "N相温度"],
								textStyle: {
									color: "#ffffff"
								}
							},
							toolbox: {},
							grid: {
								top: "15%",
								left: "4%",
								right: "10%",
								bottom: "3%",
								containLabel: true
							},
							xAxis: [{
								type: "category",
								boundaryGap: false,
								data: data.xValue.map(function(str) {
									return str.replace(" ", "\n");
								}),
								axisLabel: {
									textStyle: {
										fontSize: 14,
										color: "#fff"
									}
								}
							}],
							yAxis: [{
								type: "value",
								axisLabel: {
									margin: 10,
									textStyle: {
										fontSize: 14,
										color: "#fff"
									}
								},
								axisLine: {
									show: false
								},
								axisTick: {
									show: false
								}
							}],
							series: [{
									name: "A相温度",
									type: "line",
									smooth: true,
									areaStyle: {
										normal: {
											width: 1
										}
									},
									data: data.yaValue
								},
								{
									name: "B相温度",
									type: "line",
									smooth: true,
									areaStyle: {
										normal: {
											width: 1
										}
									},
									data: data.ybValue
								},
								{
									name: "C相温度",
									type: "line",
									smooth: true,
									areaStyle: {
										normal: {
											width: 1
										}
									},
									data: data.ycValue
								},
								{
									name: "N相温度",
									type: "line",
									smooth: true,
									areaStyle: {
										normal: {
											width: 1
										}
									},
									data: data.ydValue
								}
							]
						}
					};
					// 剩余电流
					var mAContent = {
						containerId: "deviceMa",
						option: {
							title: {
								text: ""
							},
							tooltip: {
								trigger: "axis",
								formatter: function(params) {
									var relVal = params[0].name;
									for (var i = 0, l = params.length; i < l; i++) {
										relVal +=
											"<br/>" +
											params[i].seriesName +
											" : " +
											params[i].value +
											"mA";
									}
									return relVal;
								},
								axisPointer: {
									type: "cross",
									label: {
										backgroundColor: "#6a7985"
									}
								}
							},
							legend: {
								data: ["剩余电流"],
								textStyle: {
									color: "#ffffff"
								}
							},
							toolbox: {},
							grid: {
								top: "15%",
								left: "2%",
								right: "10%",
								bottom: "3%",
								containLabel: true
							},
							xAxis: [{
								type: "category",
								boundaryGap: false,
								data: data.xValue.map(function(str) {
									return str.replace(" ", "\n");
								}),
								axisLabel: {
									textStyle: {
										fontSize: 14,
										color: "#fff"
									}
								}
							}],
							yAxis: [{
								type: "value",
								axisLabel: {
									margin: 10,
									textStyle: {
										fontSize: 14,
										color: "#fff"
									}
								},
								axisLine: {
									show: false
								},
								axisTick: {
									show: false
								}
							}],
							series: [{
								name: "剩余电流",
								type: "line",
								data: data.ymaValue,
								smooth: true,
								itemStyle: {
									normal: {
										color: "#a8f8fd"
									}
								},
								areaStyle: {
									normal: {
										color: "#add8f7"
									}
								},
								lineStyle: {
									normal: {
										color: "#4baaee",
										width: 1
									}
								}
							}]
						}
					};
					var mpaContent = {
						containerId: "deviceWater",
						option: {
							title: {
								text: ""
							},
							color: ["#add8f7"],
							tooltip: {
								trigger: "axis",
								axisPointer: {
									type: "cross",
									label: {
										backgroundColor: "#6a7985"
									}
								}
							},
							legend: {
								data: ["水压"],
								textStyle: {
									color: "#ffffff"
								}
							},
							grid: {
								top: "18%",
								left: "7%",
								right: "7%",
								bottom: "20",
								containLabel: true
							},
							xAxis: [{
								nameLocation: "middle",
								type: "category",
								boundaryGap: false,
								data: data.xValue,
								axisLabel: {
									margin: 10,
									textStyle: {
										fontSize: 14,
										color: "#fff"
									}
								},
								axisTick: {
									show: false
								},
								axisLine: {
									show: false
								}
							}],
							yAxis: [{
								name: " 单位/MPa",
								nameTextStyle: {
									color: "#fff"
								},
								nameLocation: "end",
								type: "value",
								axisLabel: {
									textStyle: {
										fontSize: 14,
										color: "#fff"
									}
								},
								axisTick: {
									show: false
								},
								axisLine: {
									show: false
								}
							}],
							series: [{
								name: "水压",
								type: "line",
								areaStyle: {
									normal: {}
								},
								data: data.yValue,
								smooth: true,
								lineStyle: {
									normal: {
										color: "#4baaee",
										width: 1
									}
								},
								areaStyle: {
									normal: {
										color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1,
											[{
													offset: 0,
													color: "rgba(0, 182, 253, 1)"
												},
												{
													offset: 1,
													color: "rgba(0, 182, 253, 0)"
												}
											],
											false
										),
										shadowColor: "rgba(0, 182, 253, 1)",
										shadowBlur: 10
									}
								}
							}],
							dataZoom: [{
								type: "slider",
								show: true, //flase直接隐藏图形
								textStyle: {
									color: "#fff"
								},
								xAxisIndex: [0],
								left: "15%", //滚动条靠左侧的百分比
								bottom: "0",
								height: 12,
								width: 260,
								start: 50, //滚动条的起始位置
								end: 100 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
							}]
						}
					};
					var waterLevelContent = {
						containerId: "deviceWaterLevel",
						option: {
							title: {
								text: ""
							},
							color: ["#4baaee"],
							tooltip: {
								trigger: "axis",
								axisPointer: {
									type: "cross",
									label: {
										backgroundColor: "black"
									}
								}
							},
							legend: {
								data: ["水位"],
								textStyle: {
									color: "#ffffff"
								}
							},
							grid: {
								top: "25%",
								left: "8%",
								right: "4%",
								bottom: "3%",
								containLabel: true
							},
							xAxis: [{
								type: "category",
								boundaryGap: false,
								data: data.xValue,
								axisLabel: {
									margin: 10,
									textStyle: {
										fontSize: 14,
										color: "#fff"
									}
								},
								axisLine: {
									show: false
								}
							}],
							yAxis: [{
								name: " 单位/m",
								type: "value",
								axisLabel: {
									margin: 10,
									textStyle: {
										fontSize: 14,
										color: "#fff"
									}
								},
								axisLine: {
									show: false
								}
							}],
							series: [{
								name: "水位",
								smooth: true,
								type: "line",
								itemStyle: {
									normal: {
										color: "#a8f8fd"
									}
								},
								areaStyle: {
									normal: {
										color: "#add8f7"
									}
								},
								lineStyle: {
									normal: {
										color: "#4baaee",
										width: 1
									}
								},
								data: data.waterLevelValue
							}]
						}
					};
					//相电流
					var liuContent = {
						containerId: "deviceLiu",
						option: {
							title: {
								text: ""
							},
							tooltip: {
								trigger: "axis",
								formatter: function(params) {
									var relVal = params[0].name;
									for (var i = 0, l = params.length; i < l; i++) {
										relVal +=
											"<br/>" +
											params[i].seriesName +
											" : " +
											params[i].value +
											"A";
									}
									return relVal;
								},
								axisPointer: {
									type: "cross",
									label: {
										backgroundColor: "#6a7985"
									}
								}
							},
							legend: {
								data: ["A相电流", "B相电流", "C相电流"],
								textStyle: {
									color: "#ffffff"
								}
							},
							toolbox: {},
							grid: {
								top: "15%",
								left: "4%",
								right: "10%",
								bottom: "3%",
								containLabel: true
							},
							xAxis: [{
								type: "category",
								boundaryGap: false,
								data: data.xValue.map(function(str) {
									return str.replace(" ", "\n");
								}),
								axisLabel: {
									textStyle: {
										fontSize: 14,
										color: "#fff"
									}
								}
							}],
							yAxis: [{
								type: "value",
								axisLabel: {
									margin: 10,
									textStyle: {
										fontSize: 14,
										color: "#fff"
									}
								},
								axisLine: {
									show: false
								},
								axisTick: {
									show: false
								}
							}],
							series: [{
									name: "A相电流",
									type: "line",
									smooth: true,
									areaStyle: {
										normal: {
											width: 1
										}
									},
									data: data.yAma
								},
								{
									name: "B相电流",
									type: "line",
									smooth: true,
									areaStyle: {
										normal: {
											width: 1
										}
									},
									data: data.yBma
								},
								{
									name: "C相电流",
									type: "line",
									smooth: true,
									areaStyle: {
										normal: {
											width: 1
										}
									},
									data: data.yCma
								}
							]
						}
					};
					// 相电压
					var yaContent = {
						containerId: "deviceYa",
						option: {
							title: {
								text: ""
							},
							tooltip: {
								trigger: "axis",
								formatter: function(params) {
									var relVal = params[0].name;
									for (var i = 0, l = params.length; i < l; i++) {
										relVal +=
											"<br/>" +
											params[i].seriesName +
											" : " +
											params[i].value +
											"V";
									}
									return relVal;
								},
								axisPointer: {
									type: "cross",
									label: {
										backgroundColor: "#6a7985"
									}
								}
							},
							legend: {
								data: ["A相电压", "B相电压", "C相电压"],
								textStyle: {
									color: "#ffffff"
								}
							},
							toolbox: {},
							grid: {
								top: "15%",
								left: "4%",
								right: "10%",
								bottom: "3%",
								containLabel: true
							},
							xAxis: [{
								type: "category",
								boundaryGap: false,
								data: data.xValue.map(function(str) {
									return str.replace(" ", "\n");
								}),
								axisLabel: {
									textStyle: {
										fontSize: 14,
										color: "#fff"
									}
								}
							}],
							yAxis: [{
								type: "value",
								axisLabel: {
									margin: 10,
									textStyle: {
										fontSize: 14,
										color: "#fff"
									}
								},
								axisLine: {
									show: false
								},
								axisTick: {
									show: false
								}
							}],
							series: [{
									name: "A相电压",
									type: "line",
									smooth: true,
									areaStyle: {
										normal: {
											width: 1
										}
									},
									data: data.yAv
								},
								{
									name: "B相电压",
									type: "line",
									smooth: true,
									areaStyle: {
										normal: {
											width: 1
										}
									},
									data: data.yBv
								},
								{
									name: "C相电压",
									type: "line",
									smooth: true,
									areaStyle: {
										normal: {
											width: 1
										}
									},
									data: data.yCv
								}
							]
						}
					};
					if (
						deviceTypeId == "19050000" ||
						deviceTypeId == "01010000" ||
						deviceTypeId == "01020000" ||
						deviceTypeId == "01030000"
					) {
						//设备类型 电气火灾监控装置 显示电流曲线 电温曲线
						var myChart_zhexian = that.$echarts.init(
							document.getElementById(zheXianContent.containerId)
						);
						var zhexian_echart = myChart_zhexian.setOption(zheXianContent.option);
						var myChart_mAContent = that.$echarts.init(
							document.getElementById(mAContent.containerId)
						);
						var mAContent_echart = myChart_mAContent.setOption(mAContent.option);
						var myChart_liuContent = that.$echarts.init(
							document.getElementById(liuContent.containerId)
						);
						var liuContent_echart = myChart_liuContent.setOption(liuContent.option);
						var myChart_yaContent = that.$echarts.init(
							document.getElementById(yaContent.containerId)
						);
						var yaContent_echart = myChart_yaContent.setOption(yaContent.option);
					} else if (
						deviceTypeId == "19020000" ||
						deviceTypeId == "19030000" ||
						deviceTypeId == hydrantIndoor ||
						deviceTypeId == hydrantOutUp ||
						deviceTypeId == hydrantOutDown ||
						deviceTypeId == waterEnd ||
						deviceTypeId == "05100000" ||
						deviceTypeId == "05100100" ||
						deviceTypeId == "05100200" ||
						deviceTypeId == "05100300" ||
						deviceTypeId == "19080000"
					) {
						that.echartsIdx = 'mpaEchart';
						//设备类型 室内水压监测装置  室外水压加测装置 喷淋末端 显示水压曲线
						var myChart = that.$echarts.init(
							document.getElementById(mpaContent.containerId)
						);
						var mpaContent_echart = myChart.setOption(mpaContent.option);
					} else if (
						deviceTypeId == "19150000" ||
						deviceTypeId == waterPumpCode ||
						deviceTypeId == waterPool ||
						deviceTypeId == waterPump ||
						deviceTypeId == waterTank ||
						deviceTypeId == "05110000"
					) {
						//水位
						var myChart = that.$echarts.init(
							document.getElementById(waterLevelContent.containerId)
						);
						var waterLevel_echart = myChart.setOption(waterLevelContent.option);
					}
					$(window).resize(function() {
						if (
							deviceTypeId == "19050000" ||
							deviceTypeId == "01010000" ||
							deviceTypeId == "01020000" ||
							deviceTypeId == "01030000"
						) {
							zhexian_echart.resize();
							mAContent_echart.resize();
							liuContent_echart.resize();
							yaContent_echart.resize();
						} else if (
							deviceTypeId == "19020000" ||
							deviceTypeId == waterEnd ||
							deviceTypeId == "19030000" ||
							deviceTypeId == hydrantIndoor ||
							deviceTypeId == hydrantOutUp ||
							deviceTypeId == hydrantOutDown
						) {
							mpaContent_echart.resize();
						} else if (
							deviceTypeId == "19150000" ||
							deviceTypeId == waterPumpCode ||
							deviceTypeId == waterPool ||
							deviceTypeId == waterPump ||
							deviceTypeId == waterTank ||
							deviceTypeId == "19080000"
						) {
							waterLevel_echart.resize();
						}
					});
				});
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
	.showProber {
		display: block !important;
	}

	.hideProber {
		display: none !important;
	}

	.gg-prober-model {
		height: 140px;
    }
    
    .echart-act{
        color: #3c8dbc;
        border-bottom: 2px solid #3c8dbc;
    }
</style>
